import React from 'react'
import { Col, Row, Card } from 'antd'
import { CheckCircleOutlined } from '@ant-design/icons'
import TableComponent from './table'
import Logo from './../../assets/image/header.png'
import TimeLine from './timeline'
import './home.scss'

const Home = () => {
  const dataArr = [
    { key: '今日支付订单', value: 1234 },
    { key: '今日收藏订单', value: 123 },
    { key: '今日未支付订单', value: 321 },
    { key: '本月支付订单', value: 123 },
    { key: '本月收藏订单', value: 321 },
    { key: '本月未支付订单', value: 123 }
  ]

  const getColor = () => {
    let number1 = parseInt(Math.random() * 255)
    let number2 = parseInt(Math.random() * 255)
    let number3 = parseInt(Math.random() * 255)
    return `rgb(${number1},${number2},${number3})`
  }

  return (
    <Row className='home' gutter={16}>
      <Col span={8}>
        <Card hoverable>
          <div className='card-top'>
            <img src={Logo} alt='img' />
            <div>
              <p className='user-name'>Admin</p>
              <p className='user-role'>管理员</p>
            </div>
          </div>
          <Row>
            <Col span={8}>
              <p className='login-info'>上次登录时间</p>
            </Col>
            <Col span={16}>
              <p className='login-info value'>2021-07-19</p>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <p className='login-info'>上次登录地点</p>
            </Col>
            <Col span={16}>
              <p className='login-info value'>河南郑州</p>
            </Col>
          </Row>
        </Card>
        <TableComponent />
      </Col>
      <Col span={16}>
        <div className='number-list'>
          {dataArr.map((item, index) => {
            return (
              <Card hoverable key={index}>
                <div className='number-item'>
                  <p className='item-left' style={{ backgroundColor: getColor() }}>
                    <CheckCircleOutlined style={{ color: '#fff', fontSize: '30px' }} />
                  </p>
                  <div className='content'>
                    <p className='number'>￥{item.value}</p>
                    <p className='label'>{item.key}</p>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>
        <TimeLine />
      </Col>
    </Row>
  )
}

export default Home
